<template>
  <div class="home">
    <div class="topIamgeBox">
		<img src="../assets/stop/a85426e359625edf8869b7d33a51bb18.jpeg" class="topIamge">
	</div>
	<div class="navBox">
		<div class="navItems" @click="toJingdian">
			<img src="../assets/icon/stop.png">
			<div>景点</div>
		</div>
		<div class="navItems" @click="toFoodList">
			<img src="../assets/icon/美食.png">
			<div>美食</div>
		</div>
		<div class="navItems" @click="toZhuSu">
			<img src="../assets/icon/住宿.png">
			<div>住宿</div>
		</div>
		<div class="navItems" @click="toRouteList">
			<img src="../assets/icon/旅游路线.png">
			<div>旅游路线</div>
		</div>
		<div class="navItems" @click="toTraffic">
			<img src="../assets/icon/交通.png">
			<div>交通</div>
		</div>
		<div class="navItems">
			<img src="../assets/icon/停车场.png">
			<div>停车场</div>
		</div>
		<div class="navItems">
			<img src="../assets/icon/旅游周边.png">
			<div>周边</div>
		</div>
		<div class="navItems">
			<img src="../assets/icon/洗手间.png">
			<div>洗手间</div>
		</div>
		
	</div>
	<!-- 导航结束 -->
	<div style="padding: 0 15px; margin-bottom: 50px;">
		<!-- 热门景点 -->
		<div class="comClass">
			<h4 class="comTitle">热门景点</h4>
			<div class="recommendInfoBox">
				<div class="recommendInfo">
					<img src="../assets/stop/9d11fd2a91cbc2a8873d50cb7d53cbd5.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">红树林栈道</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/stop/145e35a7eed1ed1102c4fd459aebc31d.jpg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">浪漫海岸旅游度假区</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/stop/1526bb9d4e0b7d9a41359975f43e76c2.jpg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">潘茂名纪念公园</div>
				</div>
			</div>
		</div>
		
		<!-- 美食推荐 -->
		<div class="comClass">
			<h4 class="comTitle">美食推荐</h4>
			<div class="recommendInfoBox">
				<div class="recommendInfo">
					<img src="../assets/food/9c8579f895cc83f357b2b0b572f3fbab.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">水东鸭粥</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/food/23122094ea6644b4456275eb5928b122.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">电城鱼炸</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/food/98ff01f62951c44e11c345541bd722c6.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">“海马”瑶柱粥</div>
				</div>
			</div>
		</div>
		
		<!-- 推荐酒店 -->
		<div class="comClass">
			<h4 class="comTitle">推荐酒店</h4>
			<div class="recommendInfoBox">
				<div class="recommendInfo">
					<img src="../assets/hotel/927cee0359fee681f70a90d8f60abe58.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">茂名御水古温泉酒店</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/hotel/dd8b4482528b1069de009ad27d239bf4.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">浪漫海岸温德姆酒店</div>
				</div>
				<div class="recommendInfo">
					<img src="../assets/hotel/f3b3ba58bbad391945704ced333b7685.jpeg" style="width: 110px;height: 51px;">
					<div class="recommendInfo-title">茂名君怡酒店</div>
				</div>
			</div>
		</div>
		
	</div>

	<div class="tableBar">
		<div class="recommendInfo" @click="toHome">
			<img src="../assets/icon/home.png" style="width: 23px;height: 24px;">
			<div class="recommendInfoText">首页</div>
		</div>
		<div class="recommendInfo"  @click="toHot">
			<img src="../assets/icon/faxian.png" style="width: 23px;height: 24px;">
			<div class="recommendInfoText">发现</div>
		</div>
		<div class="recommendInfo">
			<img src="../assets/icon/wode.png" style="width: 23px;height: 24px;">
			<div class="recommendInfoText">我的</div>
		</div>
	</div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
	
    }
  },
  methods:{
	  toJingdian(){
		  this.$router.push({name:'jingdian'})
	  },
	  toFoodList(){
		   this.$router.push({name:'foodList'})
	  },
	  toZhuSu(){
	  		   this.$router.push({name:'zhusu'})
	  },
	  toRouteList(){
		  this.$router.push({name:'routeList'})
	  },
	  toTraffic(){
	  		  this.$router.push({name:'traffic'})
	  },
	  toHot(){
		  this.$router.push({name:'hotSpot'})
	  },
	  toHome(){
	  		this.$router.go(-1)
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.home{
		position: relative;
	}
	.topIamgeBox{
		width: 100%;
		height: 215px;
	}
	.topIamge{
		width: 100%;
		height: 215px;
	}
	.navBox{
		display: flex;
		flex-wrap: wrap;
		height: 184px;
		width: 100%;
		background-color: #ffffff;
	}
	.navItems{
		display: flex;
		width: 25%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.comClass{
		margin: 30px 0;
	}
	.comTitle{
		height: 25px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1F2927;
		line-height: 25px;
		text-align: left;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.recommendInfoBox{
		display: flex;
	}
	.recommendInfo{
		display: flex;
		width: 33%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.recommendInfo-title{
		height: 17px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1F2927;
		line-height: 17px;
	}
	.tableBar{
		width: 100%;
		height: 46px;
		position: fixed;
		display: flex;
		bottom: 0;
		background-color: #F9F9F9;
	}
	.recommendInfo{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 33%;
	}
	.recommendInfoText{
		height: 14px;
		font-size: 10px;
		font-family: SFProText-Medium, SFProText;
		font-weight: 500;
		color: #BFBFBF;
		line-height: 12px;
	}
</style>
